<div class="l-pinpoint-user-wrapper">
    <div class="l-pinpoint-user-title">
        <span>Pinpoint User ({{pinpointUserList.length}})</span>
        <div>
            <button [hidden]="!allowedUserEdit" class="btn btn-sm btn-blue" (click)="onShowAddUser()"><i
                    class="fas fa-plus"></i></button>
            <button class="btn btn-sm btn-blue" (click)="onReload()"><i class="fas fa-sync"></i></button>
        </div>
    </div>
    <div class="l-pinpoint-user-search">
        <input type="text" placeholder="{{i18nText.SEARCH_INPUT_GUIDE}}" class="l-search-input"
               ppSearchInput
               [searchMinLength]="minLength.search"
               [useEnter]="searchUseEnter"
               (outSearch)="onSearch($event)"
               #searchInput>
        <button class="l-search-button" (click)="onSearch(searchInput.value)"><i class="fas fa-search"></i></button>
    </div>
    <div class="l-pinpoint-user-list">
        <ng-container *ngIf="!isEmpty; else emptyText">
            <cdk-virtual-scroll-viewport itemSize="28" style="height: 100%;">
                <pp-pinpoint-user
                        *cdkVirtualFor="let pinpointUser of pinpointUserList; templateCacheSize: 22"
                        [pinpointUser]="pinpointUser"
                        [isEnabled]="isUserGroupSelected"
                        [isChecked]="isChecked(pinpointUser.userId)"
                        [allowedUserEdit]="allowedUserEdit"
                        (outCheckUser)="onCheckUser($event)"
                        (outRemove)="onRemovePinpointUser($event)"
                        (outEditUser)="onShowUpdateUser($event)"
                        (outAddUser)="onAddUser($event)">
                </pp-pinpoint-user>
            </cdk-virtual-scroll-viewport>
        </ng-container>
        <ng-template #emptyText>
            <p class="l-empty-text">{{i18nText.EMPTY}}</p>
        </ng-template>
    </div>
    <ng-container *ngIf="showCreate">
        <pp-pinpoint-user-create-and-update
                [i18nLabel]="i18nLabel"
                [i18nGuide]="i18nGuide"
                [minLength]="minLength"
                [userInfo]="userInfo"
                [allowedUserEdit]="allowedUserEdit"
                (outUpdatePinpointUser)="onUpdatePinpointUser($event)"
                (outCreatePinpointUser)="onCreatePinpointUser($event)"
                (outClose)="onCloseCreateUserPopup()">
        </pp-pinpoint-user-create-and-update>
    </ng-container>
    <ng-container *ngIf="errorMessage">
        <pp-server-error-message
                [message]="errorMessage"
                (outClose)="onCloseErrorMessage()">
        </pp-server-error-message>
    </ng-container>
    <pp-film-for-disable *ngIf="useDisable" [zIndex]="9" [marginWidth]="0"></pp-film-for-disable>
    <pp-loading [showLoading]="showLoading" [zIndex]="20"></pp-loading>
</div>
    